<template>
    <div class="header-banner-box">
        <div
            class="header-banner-nav"
            clipChildren="false"
            clipToPadding="false"
        >
            <div
                class="header-banner-bg"
                :gradientBackground="bgGradientBackground"
            ></div>
            <tv-list
                class="banner-list"
                horizontal
                ref="bannerListRef"
                clipPadding="{ left: 0, right: 0 }"
                @item-focused="focusSelectFun"
                @item-click="focusClickFun"
                clipChildren="false"
                clipToPadding="false"
                endHintEnabled="false"
                nextFocusName="{msgId:'headerBannerList',left:'self',right:'self',down:'self',up:'self' }"
            >
                <tv-item
                    :focusable="route.name === 'home' ? true : false"
                    keyDelayTime="500"
                    class="banner-item"
                    type="10"
                >
                    
                    <div class="banner-nav" duplicateParentState>
                        <div class="banner-focus-bg" duplicateParentState></div>
                        <div class="banner-focus-shadow-bg" duplicateParentState></div>
                        <div class="banner-select-bg" duplicateParentState></div>
                        <div
                            duplicateParentState
                            class="title-box"
                        >
                            <text-view
                                duplicateParentState
                                gravity="center"
                                class="title-text"
                                text="${title}"
                            ></text-view>
                        </div>
                    </div>
                </tv-item>
            </tv-list>
        </div>
    </div>
</template>
<script>
import Store from "@/store";
export default {
    name: "HeadetBtn",
    props: ["route"],
    data() {
        return {
            allConfigs: Store.getData("allConfigs"),
            bannerList: [],
            bannerFocusIndex: -1,
            bgGradientBackground: {
                type: 0,
                shape: 0,
                orientation: 6,
                colors: ["#00000000", "#7a000000", "#00000000"],
                cornerRadii4: [0, 0, 0, 0],
            },
            itemGradientBackgroundList: [
                {
                    type: 0,
                    shape: 0,
                    orientation: 6,
                    colors: ["#00000000", "#00000000", "#00000000"],
                    cornerRadii4: [68, 68, 68, 68],
                },
                {
                    type: 0,
                    shape: 0,
                    orientation: 7,
                    colors: ["#ff00BBFF", "#ff2D2FFF", "#ff4958FF"],
                    cornerRadii4: [68, 68, 68, 68],
                },
                {
                    type: 0,
                    shape: 0,
                    orientation: 0,
                    colors: ["#4dFFFFFF", "#4dFFFFFF", "#4dFFFFFF"],
                    cornerRadii4: [68, 68, 68, 68],
                },
            ],
        };
    },
    mounted() {
        this.updateBannerList();
    },
    methods: {
        updateBannerList() {
            let newList = [];
            if (Store.storeData.entryPage?.flowType !== "QUICK_APP") {
                this.$nextTick(() => {
                    this.compSetFocus();
                });
            }
            const defalutBg = this.itemGradientBackgroundList[0];
            const focusBg = this.itemGradientBackgroundList[1];
            const nameList = this.allConfigs.TOPICID_NAME
            for (let index = 0; index < nameList.length; index++) {
                const element = nameList[index];
                let info = {
                    title: element,
                    type: "10",
                    gradientBackground:
                        this.bannerFocusIndex === index ? focusBg : defalutBg,
                };
                newList.push(info);
            }
            this.bannerList = newList;
            this.$refs.bannerListRef.setListData(this.bannerList);
        },
        focusSelectFun(evt) {
            this.$emit("focusHistoryChange", "HeaderBannerWrap");
            let { position } = evt;
            const oldIBannerIndex = this.bannerFocusIndex;
            this.updateItemGradientBackground(oldIBannerIndex, position);
            this.$nextTick(() => {
                this.bannerFocusIndex = position;
            });
        },
        // 不要删掉，删掉触发不了上焦事件
        focusClickFun() {
            console.log("focusClickFun");
        },
        focusBlurFun() {
            this.updateItemGradientBackground(
                this.bannerFocusIndex,
                this.bannerFocusIndex,
                true
            );
        },
        focusCancleFun() {
            const defalutBg = this.itemGradientBackgroundList[0];
            this.bannerList[this.bannerFocusIndex] = {
                ...this.bannerList[this.bannerFocusIndex],
                gradientBackground: defalutBg,
            };
            this.$refs.bannerListRef?.updateItem(
                this.bannerFocusIndex,
                this.bannerList[this.bannerFocusIndex]
            );
        },
        updateItemGradientBackground(oldIndex, index, isLeave) {
            const defalutBg = this.itemGradientBackgroundList[0];
            const focusBg = this.itemGradientBackgroundList[1];
            const leaveFocusBg = this.itemGradientBackgroundList[2];
            this.bannerList[oldIndex] = {
                ...this.bannerList[oldIndex],
                gradientBackground: defalutBg,
            };
            this.$refs.bannerListRef?.updateItem(
                oldIndex,
                this.bannerList[oldIndex]
            );
            if (isLeave) {
                this.bannerList[oldIndex] = {
                    ...this.bannerList[oldIndex],
                    gradientBackground: leaveFocusBg,
                };
                this.$refs.bannerListRef?.updateItem(
                    oldIndex,
                    this.bannerList[oldIndex]
                );
            } else {
                if (oldIndex !== index) {
                    this.bannerList[oldIndex] = {
                        ...this.bannerList[oldIndex],
                        gradientBackground: defalutBg,
                    };
                    this.$refs.bannerListRef?.updateItem(
                        oldIndex,
                        this.bannerList[oldIndex]
                    );
                }
                this.$nextTick(() => {
                    this.bannerList[index] = {
                        ...this.bannerList[index],
                        gradientBackground: focusBg,
                    };
                    this.$refs.bannerListRef?.updateItem(
                        index,
                        this.bannerList[index]
                    );
                });
            }
        },
        queryGradientBackground(index) {
            if (this.bannerFocusIndex === index) {
                return;
            } else if (this.bannerFocusIndex !== index) {
                return;
            }
            return;
        },
        compSetFocus(rowIndex) {
            const toPageIndex = Math.max(this.bannerList.findIndex(banner => banner.title === this.$route.query?.toPage), 0)
            let focusIndex =
                rowIndex > -1
                    ? rowIndex
                    : this.bannerFocusIndex > 0
                    ? this.bannerFocusIndex
                    : toPageIndex;
            console.log("enterFullScreenAction:compSetFocus", focusIndex)
            this.$refs.bannerListRef.requestChildFocus(focusIndex);
        },
    },
    watch: {
        bannerFocusIndex(newVal, oldVal) {
            if (oldVal != newVal) {
                this.$parent.bannerFocusIndex = newVal;
                this.$emit("selectCreatAction", true);
            }
        },
    },
};
</script>
<style lang="less" scoped>
.header-banner-box {
    margin-top: 26px;
    align-self: center;
    width: 972px;
    height: 75px;
    background-color: transparent;
    z-index: 400;
    .header-banner-nav {
        position: relative;
        align-self: center;
        width: 972px;
        height: 75px;
        background-color: transparent;
        .header-banner-bg {
            position: absolute;
            top: 4px;
            left: 0;
            width: 972px;
            height: 67px;
            background-color: transparent;
        }
        .banner-list {
            width: 564px;
            height: 105px;
            align-self: center;
            align-items: center;
            flex-direction: row;
            .banner-item {
                width: 182px;
                height: 75px;
                border-radius: 30px;
                align-items: center;
                justify-content: center;
                .banner-focus-bg {
                    focus-background-color: #fff;
                    width: 160px;
                    height: 75px;
                    border-radius: 37px;
                    position: absolute;
                    left: 0;
                    top: 0;
                    z-index: 10;
                }
                .banner-focus-shadow-bg {
                    focus-background-image: url(assets/raw/image/nav-shadow.webp);
                    width: 190px;
                    height: 105px;
                    position: absolute;
                    left: 0;
                    top: 0;
                    z-index: 5;
                }
                .banner-select-bg {
                    select-background-color: rgba(255, 255, 255, 0.3);
                    width: 132px;
                    height: 61px;
                    border-radius: 30px;
                    position: absolute;
                    left: 0;
                    top: 0;
                }
                .banner-nav {
                    position: relative;
                    align-self: center;
                    justify-content: center;
                    width: 132px;
                    height: 61px;
                    .title-box {
                        width: 132px;
                        height: 33px;
                        border-radius: 30px;
                        background-color: transparent;
                        position: absolute;
                        z-index: 20;
                        .title-text {
                            align-self: center;
                            width: 132px;
                            height: 40px;
                            line-height: 33px;
                            font-size: 33px;
                            letter-spacing: 0px;
                            color: #c5c5c5;
                            font-weight: normal;
                            focus-color: #000;
                            select-color: #fff;
                            margin-top: -5px;
                        }
                    }
                    .banner-icon {
                        align-self: center;
                    }
                    .lottieview-list {
                        align-self: center;
                    }
                }
            }
        }
    }
}
</style>
